<template>
    <div class="environWrapper">
        <Header :style="{height:showTool ? '' : '0px'}" style="transition: height .4s;" v-if="false">
            <div style="display: flex;justify-content: space-between;width: 100%;">
                <div style="color: #333;font-size:20px;font-weight: 600;">{{vmName}}</div>
                <ul class="operation">
                    <li>
                        <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end">
                            <a href="javascript:void(0)">
                                工具库信息({{filterToolStatus()}})
                                <Icon type="ios-arrow-down"></Icon>
                            </a>
                            <DropdownMenu slot="list">
                                <template v-if="toolDetail && toolDetail.status === 'running' && toolDetail.toolUrl">
                                    <DropdownItem>地址：{{toolDetail.toolUrl}}</DropdownItem>
                                    <DropdownItem>账号：{{toolAcountInfo.name}}</DropdownItem>
                                    <DropdownItem>密码：{{toolAcountInfo.password}}</DropdownItem>
                                </template>
                            </DropdownMenu>
                        </Dropdown>
                    </li>
                    <li>
                        <Button type="primary" @click="opTool('start')" :loading="loading.start" :disabled="toolDetail && toolDetail.status === 'running'">开启</Button>
                        <Button type="primary" @click="opTool('stop')" :loading="loading.stop" :disabled="!toolDetail || toolDetail.status !== 'running'">关闭</Button>
                    </li>
                    <!-- <li style="cursor: pointer" @click="refreshVm">
                        <img src="./refresh.png" style="width: 16px;height: 20px;vertical-align: middle;margin-top: -5px" alt="vm">
                        <span>刷新</span>
                    </li> -->
                    <li><Divider type="vertical" /></li>
                    <li style="width: 120px" v-show="leftTime > 0">
                        <span style="font-size:26px;color:rgb(51, 115, 255);font-weight: 600">
                        <span style="position: relative;top: 2px;">{{curTime.h}}:{{curTime.m}}:{{curTime.s}}</span>
                    </span>
                    </li>
                </ul>
            </div>
        </Header>
        <Content>
            <div style="display: flex;justify-content: flex-start;width: 100%;height: 100%">
                <iframe :src="curVmUrl" frameborder="0" id="environ" @mouseover="setFocus"></iframe>
            </div>
            <Spin size="large"  fix v-if="spinShow" style="top:60px">
                <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
                <div>试验机正在创建，请稍后...</div>
            </Spin>
        </Content>
        <!-- <div v-show="type ==='rdp'" class="tool-icon" @click="expandTool">
            <Icon type="ios-build" size="36"/>工具库</div>
            <ToolModal ref="toolModal" :prjId="prjId" :showCountdown="true" :showInVm="true" @close="closeModal"></ToolModal> -->
        </div> 
</template>

<script>
import cookieUse from '@/libs/cookie.js'
import { geturl } from '@/api/selfStudy/courseExp.js'
// import toolMixin from './tool/toolMixin'
// import ToolModal from './toolModal.vue'
export default {
    // mixins:[ toolMixin],
    // components:{ToolModal},
    data() {
        return {
           ...this.$route.query,
           curTime:{h:0,m:0,s:0},
           curVmUrl:'',
           spinShow:false,
        //    closeWindowModal:false,
        //    closeTime:5,
        //    leftTime:0,
        //    showTool:true
        }
    },
    // computed:{
    //     time(){
    //         if(this.toolDetail && this.toolDetail.time){
    //             return this.toolDetail.time
    //         }else{
    //             return this.toolkitOpenTime * 60 * 60 * 1000 
    //         }
    //     }
    // },
    // watch:{
    //     time(val){
    //         this.leftTime = val;
    //         this.getTimes()
    //     }
    // },
    mounted() {
        // if(this.type === 'rdp'){
        //     // this.showTool = true
        //     this.expandTool()
        // }
        // this.getToolTunnelDetail();
        this.openConsole();
        // this.getToolAccount();
        // this.destoryInterval = setInterval(() => {
        //     this.getToolTunnelDetail();
        // },1000*60*10)
    },
    created(){
        this.getToken = cookieUse.getCookie('desig-token') || ''
    },
    beforeDestory(){
        clearTimeout(this.timeout);
        clearInterval(this.destoryInterval);
    },
    methods: {
        openConsole(){
            let params = {
                vmId:this.vmId,
                type:this.type,
                data:{
                    ip:this.vmIp,
                    // enableRecordScreen:false
                }
            }
            geturl(params)
                .then(data =>  {
                    if(data.code == 1){
                        let url = data.attribute.url;
                        this.curVmUrl = `${url}&Authorization=${this.getToken}&useIn=newTool&prjId=${this.prjId}&subnetId=${this.currentSubnetId}`;
                        this.spinShow = false
                    }else {
                        this.$Message.error({
                            content:data.message,
                            duration:3,
                        })
                        this.spinShow = false
                    }
                })
                .catch(err=>{
                    console.log(err)
                    this.spinShow = false
                })
        },
        // 刷新
        refreshVm(){
            window.location.reload()
        },
        getTimes(){
            clearTimeout(this.timeout);
            let leftTime = this.leftTime;
            console.log(leftTime);
            if(leftTime > 0){
                let h = Math.floor(leftTime / 1000 / 60 / 60);
                let m = Math.floor(leftTime / 1000 / 60 % 60);
                let s = Math.floor(leftTime / 1000 % 60);
                this.curTime  = {
                    h:h < 10 ? '0'+h : h,
                    m:m < 10 ? '0'+m : m,
                    s:s < 10 ? '0'+s : s
                }
                this.timeout = setTimeout(() => {
                    this.leftTime = this.leftTime - 1000;
                    this.getTimes();
                },1000);
            }else{
                // 关闭页面
                // this.closeWindowModal = true;
                // this.timeout = setTimeout(() => {
                //     this.closeTime = this.closeTime - 1;
                //     if(this.closeTime <= 0){
                //         window.close();
                //     }
                //     this.getTimes();
                // },1000);
            }
        },
        // 鼠标移入时 试验机获取焦点
        setFocus() {
            document.getElementById('environ').contentWindow.focus();
        },
        // closeModal(){
        //     this.showTool = false;
        // },
        // expandTool(){
        //     this.showTool = !this.showTool;
        //     if(this.showTool){
        //         this.$refs.toolModal.showModal(this.currentSubnetId);
        //     }else{
        //         this.$refs.toolModal.hideModal();
        //     }
        // }
    }
}
</script>

<style scoped>
.ivu-layout-content{
    height:100vh;
}
.ivu-layout-header{
    height: 60px;
    line-height: 60px;
    margin-bottom: 3px;
    background: #fff;
    color:#000;
    overflow: hidden;
    box-shadow: 0 0px 5px 1px #515a6e;
}
.ivu-drawer-header{
    display: none;
}
.ivu-drawer{
    top:63px!important;
}
.operation{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.operation>li{
    margin-left: 30px;
}
#childMenu .ivu-select-dropdown{
    width:100px;
}
.environWrapper{
    width: 100%;
    height:100%;
    overflow: hidden;
}
.environWrapper .ivu-dropdown-item{
    padding:7px 10px;
}
.environWrapper .ivu-layout-header{
    padding: 0 20px 0 20px;
}
#environ{
    height: 100%;
    width: 100%;
    transition: width 1s;
}
/* .tool-icon{
    position: absolute;
    top:0px;
    right:628px;
    display: flex;
    flex-direction: column;
    width: 100px;
    padding: 5px 15px 2px;
    line-height: 1.5;
    background-color: rgba(45,45,45,.5);
    border-radius: 0 0 6px 6px;
    font-size: 12px;
    letter-spacing: 2px;
    color: #ddd;
    font-weight: 700;
    text-align: center;
    cursor:pointer;
    transition: all .2s;
    margin-top:-40px;
}
.tool-icon .ivu-icon{
    margin-bottom: 4px;
}
.tool-icon:hover{
    margin-top:0;
} */
</style>
<style>
.left-top-modal .ivu-modal{
    width: auto!important;
}
.left-top-modal .ivu-modal-content{
    left: calc(100vw - 340px);
    top: 0px;
}
</style>
